<template>
<view class="body">
    <view class="list">
        <view v-for="(item, index) in folderList" :key="index" :class="'list-item ' + (item.id ? 'ch' : '') + ' ' + (typeid == item.id ? 'chouse' : '')" @tap="click" :data-index="index" :data-id="item.id">{{item.collect ? item.collect : item}}</view>
    </view>
    <view :class="'confirm ' + (typeid ? 'bind' : '')" @tap="confirm">确定</view>
</view>
</template>

<script>
const app = getApp();
import util from "../../../../utils/util";
import tools from "../../../../utils/tools.js";
var list = [];
var type = "";
var type_id = "";
var valueid = "";
var apitype = "";
var value = "";

export default {
  data() {
    return {
      folderList: [],
      typeid: "",
      typename: ""
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    type = options.type;
    type_id = options.type_id;
    valueid = options.valueid;
    apitype = options.apitype;
    value = options.value;
    util.getUrl(app.globalData.url).then(res => {
      util.request("user.php", {
        action: "collect_type"
      }, "POST").then(res => {
        if (res.data.message == "success") {
          res.data.data.type.forEach(item => this.folderList.push({
            collect: item
          }));
          this.setData({
            folderList: this.folderList
          });
          list = res.data.data.name;
        }
      });
    });
  },
  methods: {
    click(e) {
      let index = e.currentTarget.dataset.index;
      let id = e.currentTarget.dataset.id;
      let data = this.folderList[index];

      if (id) {
        this.setData({
          typeid: data.id,
          typename: data.collect
        });
      } else {
        let child = this.getChild(data.collect);

        if (data.child) {
          this.folderList.splice(index + 1, data.childlength);
          this.typeid = 0;
          this.typename = "";
          this.folderList[index].child = false;
        } else {
          this.folderList.splice(index + 1, 0, ...child);
          this.folderList[index].child = true;
          this.folderList[index].childlength = child.length;
          this.typeid = this.folderList[index + 1].id;
          this.typename = this.folderList[index + 1].collect;
          let hasChildItem = this.folderList.filter(item => item.child && !item.id && item.collect != data.collect)[0];

          if (hasChildItem) {
            let delIndex = this.folderList.findIndex(item => !item.id && item.collect == hasChildItem.collect);

            if (delIndex >= 0) {
              this.folderList[delIndex].child = false;
              this.folderList[delIndex].childlength = 0;
            }
          }
        }
      }

      uni.setNavigationBarTitle({
        title: this.typename ? this.typename : "请选择收藏夹名称"
      });
      this.setData({
        folderList: this.folderList,
        typeid: this.typeid,
        typename: this.typename
      });
    },

    getChild(type) {
      return list.filter(item => item.type == type);
    },

    confirm() {
      if (this.typeid) {
        if (type == "new") util.request("user.php", {
          action: "collect",
          option: "collect_add",
          user_id: uni.getStorageSync("user_id"),
          openid: uni.getStorageSync("openid"),
          type_id: this.typeid
        }, "POST").then(res => {
          if (valueid) {
            if (apitype == "add") {
              this.addCollect(valueid, this.typeid);
            } else {
              tools.moveCollect(this.typeid, valueid).then(res => {
                uni.navigateBack({
                  url: '/pages/mine/collect/index/index'
                });
              });
            }
          } else {
            uni.showToast({
              title: `创建成功`
            });
            uni.navigateBack();
          }
        });else if (type == "rename") util.request("user.php", {
          action: "collect",
          option: "mod",
          user_id: uni.getStorageSync("user_id"),
          openid: uni.getStorageSync("openid"),
          new_id: this.typeid,
          type_id
        }, "POST").then(res => {
          uni.showToast({
            title: '收藏成功'
          });
          uni.navigateBack({
            delta: 1
          });
        });
      } else uni.showToast({
        title: '请选择收藏夹',
        icon: 'none'
      });
    },

    addCollect(id, type_id) {
      let data = {
        action: "collect",
        option: "add",
        valueid: id,
        user_id: uni.getStorageSync("user_id"),
        type_id,
        openid: uni.getStorageSync("openid"),
        path: "article",
        value
      };
      util.request('user.php', data, 'POST').then(res => {
        if (res.data.state == 1) {
          uni.showToast({
            title: res.data.message
          });
          uni.navigateBack({});
        }
      });
    }

  }
};
</script>
<style>
.list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 30rpx;
}

.list-item {
    width: 30%;
    height: 120rpx;
    margin-right: 18rpx;
    margin-bottom: 20rpx;
    line-height: 120rpx;
    text-align: center;
    background-color: #EEEEEE;
    border: 2rpx solid #EEEEEE;
    border-radius: 15rpx;
}

.ch {
    background-color: #FFFFFF;
    border: 2rpx solid #F2F2F2;
}

.confirm {
    position: fixed;
    bottom: 60rpx;
    width: 90%;
    margin-left: 5%;
    height: 80rpx;
    line-height: 80rpx;
    border: 2rpx solid #797979;
    text-align: center;
    border-radius: 10rpx;
}

.chouse {
    border: 2rpx solid #FF6600;
}

.bind {
    background-color: #ff6600;
    color: #FFFFFF;
    border: 0;
}
</style>